<template>
  <div class="checks">
    <head-top v-if="status===1" head-title="监理" hidden='true' check="立即发布" @toCheck="$router.push('/CheckPublish')"></head-top>
    <head-top v-else head-title="监理"></head-top>
    <p v-if="!noList" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">您不是该小区业主或员工，查看不了</p>
    <!--&lt;!&ndash;<head-top head-title="评估查验" hidden='true' right-title="立即发布"></head-top>&ndash;&gt;-->
    <div class="month_type border-bottom-last" v-if="noList">
      <li class="month_li">
        <span>时间筛选：</span>
        <div class="selectDiv">
          <select class="selectBox" v-model="monthValue" @change="_getsortType">
            <option v-for="(item,index) in monthType" :value="item.value" :key="index">
              {{item.label}}
            </option>
          </select>
        </div>
      </li>
    </div>
    <div class="check_box " v-if="noList"
         v-show="monthValue === 'month' || monthValue === 'lastQuarter' || monthValue === 'halfYear' || monthValue === 'OneYear'">
      <!--分类部分-->
      <div class="type-wrapper" ref="typeWrapper">
        <mt-navbar v-model="selected">
          <mt-tab-item :id="index" v-for="(item, index) in checkData" :key="index">{{item.name}}
          </mt-tab-item>
        </mt-navbar>
      </div>
      <!--内容展示部分-->
      <div class="check-wrapper" ref="checkWrapper">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item :id="index" v-for="(item, index) in checkData" :key="index">
            <ul class="list">
              <li v-for="(list,index) in item.data" :key="index" v-show="list.state===1" class="check-item border-bottom-1px"
                  @click="$router.push('/CheckDetailList/'+list.id)">
                <div class="image">
                  <span v-show="list.img[0]" v-lazy:background-image="list.img[0]"></span>
                  <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
                </div>
                <div class="content">
                  <h2 class="titleh2" v-if="list.project_name!==null">{{list.project_name}}</h2>
                  <h2 class="titleh2" v-else>暂无标题</h2>
                  <div class="number_box" v-show="list.lift_num && list.lift_num != '0'">
                    <!-- <span class="text_title" v-show="list.lift_num==='0'"></span> -->
                    <span class="text">电梯编号:{{list.lift_num}}</span>
                  </div>
                  <div class="time">
                    时间：{{list.created_at*1000 | dateFmt('YYYY-MM-DD')}}
                  </div>
                </div>
              </li>
              <li v-show="item.st===0" class="no-data">
                <img src="../../assets/default.png" alt="" width="100" height="100">
                <p>抱歉！ 暂无数据</p>
              </li>
            </ul>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import { Indicator } from 'mint-ui'
  import { getsortType } from '../../api/supervise.js'

  export default {
    name: 'Check',
    data () {
      return {
        checkData: [],
        noList: true,
        status: '',
        selected: '1',
        showMonth: false,
        monthValue: 'month',
        monthType: [
          {
            label: '1个月',
            value: 'month'
          },
          {
            label: '3个月',
            value: 'lastQuarter'
          },
          {
            label: '6个月',
            value: 'halfYear'
          },
          {
            label: '1年',
            value: 'OneYear'
          }
        ],
        isFirstEnter: false
      }
    },
    mounted () {
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'CheckDetailList') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._getsortType()
      }
      this.$route.meta.isBack = false
    },
    created () {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      this._getsortType()
      setTimeout(function () {
        Indicator.close()
      }, 5000)
    },
    // 设置缓存从哪个页面返回
    methods: {
      // 数据列表获取
      _getsortType () {
        getsortType(this.monthValue).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.checkData = res.data.data
            // status状态：1-工作人员  0-非工作人员
            this.status = res.data.status
          }
          if (res.code === 400) {
            Indicator.close()
            this.noList = false
          }
        })
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .checks {
    background-color: #fff;
    .month_type {
      width: 100%;
      height: 40px;
      position: fixed;
      z-index: 20;
      top: 90px;
      background: #fff;
      .month_li {
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        @include border-bottom-1px(rgba(7, 17, 27, .1));
        span {
          float: left;
          display: block;
          margin-left: 30%;
        }
        .selectDiv {
          width: 120px;
          height: 36px;
          background: #fff;
          float: left;
          margin-top: 2px;
          .selectBox {
            outline: none;
            width: 100%;
            height: 36px;
            line-height: 36px;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-left: 42px;
            background: #fff;
            border-radius: 0;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-left: 1px solid #d7d7d7;
            border-right: 1px solid #d7d7d7;
          }
        }
      }
    }
    .mypopup {
      .mint-popup {
        width: 65%;
        height: 32%;
        top: 35%;
        border-radius: 5px;
      }
    }
    .check_box {
      display: flex;
      position: absolute;
      top: 135px;
      /*top: 80px;*/
      bottom: 60px;
      width: 100%;
      overflow: hidden;
      .type-wrapper {
        background: #f2f2f2;
        flex: 0 0 90px;
        width: 90px;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .mint-navbar {
          width: 90px;
          display: inline-block;
          .mint-tab-item.is-selected {
            border-bottom: none;
            color: #26a2ff;
            margin-bottom: 0;
            background-color: #fff;
          }
          .mint-tab-item {
            @include border-bottom-1px(rgba(7, 17, 27, .1));
            background-color: #f2f2f2;
            &:last-child {
              @include border-none()
            }
          }
        }
      }
      .check-wrapper {
        position: absolute;
        left: 90px;
        top: 0;
        width: 100%;
        height: 100%;
        flex: 1;
        background-color: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .list {
          .no-data {
            width: 80%;
            text-align: center;
            color: #0b7ad9;
            font-size: 14px;
            img {
              padding-top: 20px;
            }
            p {
              margin-top: 5px;
            }
          }
        }
        .check-item {
          display: flex;
          margin: 5px 10px 0 5px;
          padding-bottom: 5px;
          align-items: center;          
          .image {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
            margin-right: 10px;
            background: #f2f2f2;
            span {
              display: block;
              width: 100%;
              height: 100%;
              background-size: cover;
            }
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .content {
            flex: 1;
            .titleh2 {
              margin-bottom: 10px;
              font-size: 14px;
              color: #393939;
              @include ellipsis(1);
              width: 70%;
            }
            .number_box {
              font-size: 12px;
              margin-bottom: 10px;
            }
            .time {
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
